【第1733期】Element-UI 技术揭秘 — Container布局容器组件的设计与实现
前言
Element-UI 技术揭秘 系列第三篇来了。文末有直播福利，有兴趣的童鞋可以关注下。今日早读文章由Zoom架构师@黄轶授权分享。
公众号后台回复关键词 黄轶 查看专栏内容
正文从这开始～～
【第1721期】Element-UI 技术揭秘 — Layout布局组件的设计与实现，我们分析了 Layout 布局组件的设计和实现，它的应用场景通常是局部布局。对于整个页面的布局，element-ui 提供了 Container 布局容器组件，专门用于 PC 管理后台页面的整体布局。
需求分析
我们先通过几幅图看一下页面的常见布局。
这两张图的布局在后台系统中很常见，通过简单的 CSS 就可以实现。不过我们更喜欢用组件化的开发方式，把这些 CSS 的细节封装到组件里，如下：
<el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container>
我们使用了 <el-container>、 <el-header>、 <el-main>、 <el-footer>、 <el-aside> 5 种组件，来看一下它们各自的作用：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。
这几个组件需要遵循如下约束：
<el-container>的子元素只能是后四者，后四者的父元素也只能是<el-container>。
了解了 element-ui Container 布局容器组件的需求后，我们来分析它的设计和实现。
设计和实现
针对图示的布局，我们可以通过 flex 的布局方式轻松实现，element-ui 也是基于 flex 布局实现的，接下来我们来分析各个组件的实现。
ElContainer 组件
先来看模板部分：
<template><section class="el-container"><slot></slot></section></template>
<el-container> 组件会渲染成一个 <section> 标签，并通过 slot 做内容分发。
再来看一下 CSS 部分：
@include b(container) {display: flex;flex-direction: row;flex: 1;flex-basis: auto;box-sizing: border-box;min-width: 0;}
重点看一下 CSS 部分，display:flex 创建了一个 flex 容器，flex-direction:row 指定了内部元素是在水平方向排列。这里为什么还有 flex:1 呢，因为 <el-container> 容器是支持嵌套的，并且我们知道 flex:1 相当于 flex-grow:1;flex-shrink:1;flex-basis:0，也就是当 <el-container> 被嵌套的时候，它会占满剩余空间。flex-basis:auto 表示分配空间之前会先跟父容器预约自身内容大小的空间，然后剩下的才会归入到剩余空间。
<el-container> 容器默认是水平排列，当然也需要支持垂直排列，我们可以给组件提供一个 direction 的 prop，如果传入的 direction 是 vertical，添加对应的 CSS。
<template><section class="el-container" :class="{ 'is-vertical': isVertical }"><slot></slot></section></template>
export default {name: 'ElContainer',componentName: 'ElContainer',props: {direction: String},computed: {isVertical() {if (this.direction === 'vertical') {return true;} else if (this.direction === 'horizontal') {return false;}}}};
@include when(vertical) {flex-direction: column;}
如果传入的 direction 为 vertical，则添加 is-vertical 的 CSS，最终通过修改 flex-direction:column 实现内部元素是在垂直方向排列。
回顾前面的一个需求：当 <el-container> 容器的子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
实现它也很容易，扩展计算属性 isVertical 的判断条件即可：
computed: {isVertical() {if (this.direction === 'vertical') {return true;} else if (this.direction === 'horizontal') {return false;}return this.$slots && this.$slots.default? this.$slots.default.some(vnode => {const tag = vnode.componentOptions && vnode.componentOptions.tag;return tag === 'el-header' || tag === 'el-footer';}): false;}}
这里用了一个小技巧，this.$slots.default 获取的是默认插槽中的所有 vnodes 节点，然后对他们遍历，通过 vnode.componentOptions.tag 来判断这个 vnode 是不是 <el-header> 或者是 <el-footer>。vnode.componentOptions 并不在官网 API 里，但是对于熟读 Vue 源码的人来说并不陌生。
ElHeader 组件
先来看一下模板部分：
<template><header class="el-header"><slot></slot></header></template>
<el-header> 组件会渲染成一个 <header> 标签，并通过 slot 做内容分发。
再来看一下 CSS 部分：
@include b(header) {padding: $--header-padding;box-sizing: border-box;flex-shrink: 0;}
其中 $--header-padding 是一个变量，在 packages/theme-chalk/src/common/var.scss 文件中定义。flex-shrink: 0 表示即使空间不够，也不会缩小 <el-header> 所占空间。
通常来说头部都会有一个固定高度，因此 <el-header> 允许你传入一个 height 的 props 来指定高度，如果不指定的话提供一个默认高度。
<template><header class="el-header" :style="{ height }"><slot></slot></header></template>
export default {name: 'ElHeader',componentName: 'ElHeader',props: {height: {type: String,default: '60px'}}};
由于直接通过 :style 设置的样式，所以这里传入高度的时候一定要携带单位。
ElMain 组件
先来看一下模板部分：
<template><main class="el-main"><slot></slot></main></template>
<el-main> 组件会渲染成一个 <main>标签，并通过 slot 做内容分发。
再来看一下 CSS 部分：
@include b(main) {// IE11 supports the <main> element partially https://caniuse.com/#search=maindisplay: block;flex: 1;flex-basis: auto;overflow: auto;box-sizing: border-box;padding: $--main-padding;}
注意， <main> 标签在 IE11 中是部分支持的。通常 <main> 中包裹的内容完全由它的子元素来决定，所以并不会设置高和宽，只是通过 flex:1 来分配 <el-container> 容器的剩余空间。
ElFooter 组件
先来看一下模板部分：
<template><footer class="el-footer"><slot></slot></footer></template>
<el-footer> 组件会渲染成一个 <footer> 标签，并通过 slot 做内容分发。
再来看一下 CSS 部分：
@include b(footer) {padding: $--footer-padding;box-sizing: border-box;flex-shrink: 0;}
和头部一样，通常底部也会有一个固定高度，因此 <el-footer> 允许你传入一个 height 的 props 来指定高度，如果不指定的话提供一个默认高度。
<template><footer class="el-footer" :style="{ height }"><slot></slot></footer></template>
export default {name: 'ElFooter',componentName: 'ElFooter',props: {height: {type: String,default: '60px'}}};
ElAside 组件
先来看一下模板部分：
<template><aside class="el-aside"><slot></slot></aside></template>
<el-aside> 组件会渲染成一个 <aside> 标签，并通过 slot 做内容分发。
再来看一下 CSS 部分：
@include b(aside) {overflow: auto;box-sizing: border-box;flex-shrink: 0;}
<el-aside> 组件用来渲染侧边栏，而侧边栏通常会有宽度，因此 <el-aside>，允许你传入一个 width 的 props 来指定宽度，如果不指定的话提供一个默认宽度。
<template><aside class="el-aside" :style="{ width }"><slot></slot></aside></template>
export default {name: 'ElAside',componentName: 'ElAside',props: {width: {type: String,default: '300px'}}};
总结
element-ui 的 Container 布局容器组件的实现还是很简单的：创建了一些语义化的标签，利用插槽做内容分发，通过 flex 实现布局效果。
学习完这篇文章，你可以顺便对 flex 布局、HTML5 的语义化标签做一下复习，加深理解，并了解到 Vue 源码中的一些小技巧。
关于本文 作者：@黄轶 原文：https://mp.weixin.qq.com/s/HYaKDZR-gAomkJJBOGHghQ
为你推荐
【第1452期】见微知著，Google Photos Web UI 完善之旅
在线直播
由图灵直播联合@黄轶在2019年9月26号(今晚)做一场关于《Web前端求职之路》在线直播课，有兴趣的童鞋可以通过文末左下角“阅读原文”报名参与（需提前下载钉钉）。